<template>
  <div class="sea_left flexC">
    <div class="flex5" style="padding: 2rem;">
      <div class="flex JustifyContentSB Medium font_s18 colorF">
        <p>
          <img class="verticM" style="height: 1.125rem;padding-right: 0.5rem;" src="../../assets/img/data/18.png" alt="">
          <span>前六业务主管单位</span>
        </p>
        <p>委办局／街镇</p>
      </div>
      <div class="positionR">
        <div id="echarts_1">

        </div>
        <p class="colorF flex JustifyContentSA Regular font_s24 textC" style="position: absolute;top: 5rem;left: 0;width: 26rem;">
          <span class="flex1" v-for="(item,index) in SixBusiness.slice(0,3)" :key="index">{{item.value}}</span>
          <!-- <span class="flex1">482</span>
          <span class="flex1">315</span>
          <span class="flex1">269</span> -->
        </p>
        <p class="colorF flex JustifyContentSA Regular font_s15 textC" style="position: absolute;top: 9rem;left: 0;width: 26rem;">
          <span class="flex1" v-for="(item,index) in SixBusiness.slice(0,3)" :key="index">{{item.name}}</span>
          <!-- <span class="flex1">区教育局</span>
          <span class="flex1">区民政局</span>
          <span class="flex1">区文体旅游局</span> -->
        </p>
        <p class="colorF flex JustifyContentSA Regular font_s24 textC" style="position: absolute;bottom: 4rem;left: 0;width: 26rem;">
          <span class="flex1" v-for="(item,index) in SixBusiness.slice(3)" :key="index">{{item.value}}</span>
          <!-- <span class="flex1">91</span>
          <span class="flex1">87</span>
          <span class="flex1">59</span> -->
        </p>
        <p class="colorF flex JustifyContentSA Regular font_s15 textC" style="position: absolute;bottom: 1rem;left: 0;width: 26rem;">
          <span class="flex1" v-for="(item,index) in SixBusiness.slice(3)" :key="index">{{item.name}}</span>
          <!-- <span class="flex1">区卫健委</span>
          <span class="flex1">区人社局</span>
          <span class="flex1">区科协</span> -->
        </p>
      </div>
      <div class="flex font_s15 colorF Medium textC JustifyContentSA" style="width: 70%;margin: 0 auto;">
        <p class="square">
          <img class="verticM" style="height: 0.9375rem;" src="../../assets/img/data/24.png" alt="">
          <span>民非</span>
        </p>
        <p class="square1">
          <img class="verticM" style="height: 0.9375rem;" src="../../assets/img/data/22.png" alt="">
          <span>社团</span>
        </p>
        <p class="square2">
          <img class="verticM" style="height: 0.9375rem;" src="../../assets/img/data/20.png" alt="">
          <span>基金会</span>
        </p>
      </div>
    </div>
    <div class="flexC flex4" style="padding:0 2rem;">
      <p class="colorF">
        <img class="verticM" style="height: 1.125rem;padding-right: 0.5rem;" src="../../assets/img/data/18.png" alt="">
        <span>近三年社会组织数</span>
      </p>
      <div id="echarts_2"></div>
      <!-- <img src="../../assets/img/data/27.png" alt="" style="width: 95%; height: 70%; margin-top: 1.5rem;"> -->
    </div>
  </div>
</template>
<script>
import { OrganizationNum, SixBusiness } from '@/api/sea'
export default {
  name: 'SeaLeft',
  data () {
    return {
      SixBusiness: []
    }
  },
  mounted () {
    OrganizationNum().then((data) => {
      if (data.success && data.data) {
        this.echarts2(data.data.year, data.data.jjhNums, data.data.stNums, data.data.mfNums)
      }
    })
    SixBusiness().then((data) => {
      if (data.success && data.data) {
        this.SixBusiness = data.data
      }
    })
    this.echarts()
  },
  methods: {
    echarts2 (year, jjhNums, stNums, mfNums) {
      console.log('988', year, jjhNums, stNums, mfNums)
      let myChart2 = this.$echarts.init(document.getElementById('echarts_2'))
      myChart2.setOption({
        color: ['#51f445', '#0a8ddc', '#dc9d0a'],
        calculable: false,
        xAxis: [
          {
            type: 'category',
            axisLabel: { // 坐标轴的字体颜色
              textStyle: {
                color: '#FFFFFF'
              }
            },
            data: year
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: { // 坐标轴的字体颜色
              textStyle: {
                color: '#FFFFFF'
              }
            },
            splitLine: { // 横线显示
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#384a64']
              }
            }
          }
        ],
        series: [
          {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            data: jjhNums
          },
          {
            name: 'Steppe',
            type: 'bar',
            data: stNums
          },
          {
            name: 'Desert',
            type: 'bar',
            data: mfNums
          }
        ]
      })
    },
    echarts () {
      let myChart = this.$echarts.init(document.getElementById('echarts_1'))
      myChart.setOption({
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['Matcha Latte', 49.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1]
          ]
        },
        series: [
          {
            type: 'pie',
            radius: ['17%', '20%'],
            center: ['17%', '30%'],
            label: {
              normal: {
                show: false
              }
            },
            encode: {
              itemName: 'product',
              value: '2012'
            }
          },
          {
            type: 'pie',
            radius: ['17%', '20%'],
            center: ['50%', '30%'],
            label: {
              normal: {
                show: false
              }
            },
            encode: {
              itemName: 'product',
              value: '2013'
            }
          },
          {
            type: 'pie',
            radius: ['17%', '20%'],
            center: ['83%', '30%'],
            label: {
              normal: {
                show: false
              }
            },
            encode: {
              itemName: 'product',
              value: '2014'
            }
          },
          {
            type: 'pie',
            radius: ['17%', '20%'],
            center: ['17%', '75%'],
            label: {
              normal: {
                show: false
              }
            },
            encode: {
              itemName: 'product',
              value: '2015'
            }
          },
          {
            type: 'pie',
            radius: ['17%', '20%'],
            center: ['50%', '75%'],
            label: {
              normal: {
                show: false
              }
            },
            encode: {
              itemName: 'product',
              value: '2016'
            }
          },
          {
            type: 'pie',
            radius: ['17%', '20%'],
            center: ['83%', '75%'],
            label: {
              normal: {
                show: false
              }
            },
            encode: {
              itemName: 'product',
              value: '2017'
            }
          }
        ],
        color: ['#4CFD76', '#454044']
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.sea_left{
  position: absolute;
  top:25%;
  left:1rem;
  height: 73%;
  width: 25%;
  background: url(../../assets/img/data/13.png) no-repeat;
  background-size: 100% 100%;
  #echarts_1{
    margin: 0 auto;
    width: 26rem;
    height: 21rem;
    // background: peachpuff;
  }
  .square,.square1,.square2{
    line-height: 2.375rem;
    width: 4.6875rem;
    height: 2.375rem;
  }
  .square{
    background: url(../../assets/img/data/23.png) no-repeat;
    background-size: 100% 100%;
  }
  .square1{
    background: url(../../assets/img/data/21.png) no-repeat;
    background-size: 100% 100%;
  }
  .square2{
    background: url(../../assets/img/data/19.png) no-repeat;
    background-size: 100% 100%;
  }
  #echarts_2{
    width: 26rem;
    height: 16rem;
    // background: forestgreen
  }
}
</style>
